<template>
	<view>
		<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption"  @down="downCallback"> -->
		<!-- <view class="p-l-30 p-r-30">
				<block v-if="list.length!=0" >
					<view class="bg-white p-20 m-t-20 br20 flex" v-for="item in list" >
						<block v-if="!!item.driver">
							<view class="flex flex-1">
								<view>
									<u-avatar :src="item.driver.avatar"></u-avatar>
								</view>
								<view class="m-l-20">
									<view class="bold xl">{{item.driver.driver_name}}</view>
									<view style="color: #A5A5A5;padding-top: 5rpx 0;">{{getPhone(item.driver.mobile)}}</view>
								</view>
							</view>
							<view class="" @click="delCollectDriFun(item.id)">
								取消收藏
							</view>
						</block>
					</view>
				</block>
				
			</view>-->
		<view class="collect-content" v-show="havecontent">
			<view class="m-t-70 m-b-70  ">
				<view class="flex-content">
					<image style="width:164rpx" src="../../static/fasfa-user.png" mode="widthFix"></image>
				</view>
				<view style="color: #918A8A;" class="flex-content m-t-32">
					暂无收藏司机
				</view>
			</view>
			<view class="flex-content">


				<view class="p-32" style="width: 710rpx;background-color: #FFFFFF;">
					<view class="tip-title bold lg m-b-10">
						收藏服务优质的司机，可以享受以下特权
					</view>
					<view class="flex col-center m-t-20">
						<view class="sm-dot"></view>
						<view style="color: #918A8A ;" class="m-l-5">
							向指定收藏司机发单
						</view>
					</view>
					<view class="flex col-center m-t-20">
						<view class="sm-dot"></view>
						<view style="color: #918A8A ;" class="m-l-5">
							在线与司机沟通
						</view>
					</view>
					<view class="flex col-center m-t-20">
						<view class="sm-dot"></view>
						<view class="m-l-5" style="color: #918A8A ;">
							查看司机空闲状态
						</view>
					</view>
					<view style="width: 100%;background-color:#F28363;height: 88rpx;color:#FFFFFF;"
						class="br10 xl bold flex-content m-t-70 m-b-10" @click="addcollection">
						请收藏司机
					</view>
				</view>
			</view>
		</view>
		<mescroll-body v-show="!havecontent" ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption"
			:up="upOption" @down="downCallback">
			<view style="height: 140rpx;">
				
			</view>
			<view class="search-box">
				
		
			<view class="search-content bg-white flex" @click="openserch(2)">
				<view class="flex">
					
			
				<view class="p-l-34" >
					<u-icon name="search" color="#C3C3C3" size="48"></u-icon>
				</view>
				<view class="lg m-l-18" style="color:#D7D6D6;">
					输入关键词查找司机
				</view>
					</view>
					<view class="search-txt lg">
						搜索
					</view>
			</view>
				</view>
			<view class="">

				<!-- <view class="search-content flex-content p-l-10 p-r-10">
					<u-search shape="square" placeholder="请输入手机号" height="76" style="width: 710rpx;" ></u-search>
				</view> -->
				<!-- <view style="height: 150rpx; width: 100%;"></view> -->
				<view class="">
 
					<view class="p-l-26 p-r-26">
						<view class="collect-driver m-t-28" v-for="(item,index) in list" :key="index"
							@click="getDrHome(item)">
					  <search-list :item="item"></search-list>

						</view>
					</view>
				</view>

			</view>
               <view class="bg-white flex-content" style="height: 160rpx;width: 100%; position: fixed;bottom: 0rpx;">
               	<view @click="openserch(1)" class="flex-content xxl"style="color: #FFFFFF; width:700rpx;height: 108rpx; background-color:#E85631; border-radius: 16rpx;">
               		添加收藏司机
               	</view>
               </view>
			<!-- 		</mescroll-body> -->
		</mescroll-body>

	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		collectDriList,
		delCollectDri
	} from '@/api/user'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				downOption: {
					use: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				havecontent: false,
				upOption: {},
			}
		},
		methods: {
			openserch(type){
				
					uni.navigateTo({
						url:`/bundle/pages/serch_driver/serch_driver?type=${type}`
					})
				
			},
			//获取司机主页
			getDrHome(item) {
				uni.navigateTo({
					url: `/bundle/pages/dr_home/dr_home?id=${item.id}&driver_id=${item.driver_id}`
				})
			},
			addcollection() {

					uni.navigateTo({
						url:`/bundle/pages/serch_driver/serch_driver?type=${type}`
					})
				this.havecontent = true
			},
			delCollectDriFun(id) {
				delCollectDri({
					id
				}).then(res => {
					if (res.code == 1) {
						this.$toast({
							title: '取消成功'
						})
						this.downCallback();
					}

				})
			},
			upCallback(page) {
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
				collectDriList({
					page: pageNum,
					limit: pageSize,
				}).then(({
					code,
					data
				}) => {
					if (code == 1) {
						if (page.num == 1) this.list = [];
						// console.log(page.num);
						const curPageData = data.lists;
						const curPageLen = curPageData.length;
						const totalSize=data.count
						const hasNext = !!data.more;
						this.list = this.list.concat(curPageData);
						if (this.list.length == 0) {
							this.havecontent = true

						}
						// this.mescroll.endSuccess(curPageLen, hasNext);
						this.mescroll.endBySize(curPageLen, totalSize);
					}

				}).catch(err => {
					this.mescroll.endErr()
				})
			},
		},
		computed: {

			getPhone(phone) {
				return function(phone) {
					if (typeof phone != 'undefined') {
						return phone.substr(0, 3) + '****' + phone.substr(7)
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		height: 84rpx;
		position: fixed;
		top: 36rpx;
		padding-right: 60rpx;
		padding-left: 60rpx;
		
		width: 100%;
		
	}
	.apply-time {
		width: 224rpx;
		height: 40rpx;
		border-radius: 12rpx;
		background-color: #F4F4F4;
		color: #807E7E;
	}

	.name-phone {
		justify-content: space-between;
		width: 460rpx;
	}

 .search-txt{
	 margin-right: 40rpx;
	 position: relative;
	 
 }
 .search-txt::after{
	 content: "";
	 position: absolute;
	 background-color: #ECECEC ;
	 width: 2rpx;
	 left: -16rpx;
	 top: 0rpx;
	 height: 48rpx;
 }
	.mescroll-empty {
		display: none !important;
	}

	.collect-btn {
		border: 2rpx;
		border-radius: 10rpx;
		color: #EE6841;

		border: 3rpx solid #EE6841;
	}

	.search-content {
		height:100%;
		justify-content: space-between;
		border: 2rpx solid #4D8EFB;
		top: 0rpx;
		width:100%;
		background-color: #FFFFFF;
	}


</style>
